<template>
	<view class="box">
		<form>
			<uv-icon name="arrow-left" @click="returnMoment()"></uv-icon>
			<input v-model="title" type="text" class="title" name="title" placeholder="标题" />
			<textarea v-model="content" class="textarea" name="content" placeholder="说点什么吧~" maxlength="2048"
				auto-height></textarea>
			<view class="images">
				<uni-file-picker 
				v-model="imageList" 
				limit="9" 
				ref="imagePicker" 
				:auto-upload="false"
				mode="grid" 
				title="最多选择9张图片"
				file-mediatype="image" 
				@select="select" 
				@progress="progress" 
				@success="success"
				@fail="fail"></uni-file-picker>
			</view>
			<view class="publicBar">
				<uv-button class="resetButton" hover-class="resetButtonHover" form-type="reset">重置</uv-button>
				<uv-button class="submitButton" hover-class="submitButtonHover" form-type="submit" @click="onSubmit()"
					type="primary">发布</uv-button>
			</view>
		</form>
	</view>
</template>

<script>
	import { store, mutations } from '@/uni_modules/uni-id-pages/common/store.js'
	const db = uniCloud.database();
	export default {
		data() {
			return {
				imageList: [],
				filesURL: [],
				title: "",
				content: ""
			}
		},
		onLoad(){
		},
		computed: {
			userInfo() {
				return store.userInfo
			},
			hasLogin() {
				return store.hasLogin
			}
		},
		methods: {
			async onSubmit() {
				let res = await this.$refs.imagePicker.upload();
				//console.log(res)
				this.filesURL = res.map((e) => e.url);
				//console.log(this.filesURL)
				await db.collection('pet-post').add({
					user_id: this.userInfo._id,
					pet_id: "awa",
					title: this.title,
					content: this.content,
					images: this.filesURL,
					publish_date: Date.now()
				}).then((res) => {
					console.log('Post发布成功: ', res);
					this.returnMoment();
				}).catch((err) => {
					console.log('Post发布失败: ', err)
				});
			},
			returnMoment() {
				uni.switchTab({
					url: "/pages/moments/moments"
				});
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件: ', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			// 上传成功
			success(e) {
				console.log('上传成功: ', e);
			},
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.box {
		padding: 40rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;

		.title {
			margin: 20rpx;
			padding: 5rpx;
			font-size: 40rpx;
			font-family: Arial, Helvetica, sans-serif;
			font-weight: bold;
			color: #E09AB5;
			border-bottom: 1mm ridge rgba(0, 0, 0, 0.20);
			overflow-x: auto;
		}

		.textarea {
			flex: 1;
			margin: 20rpx;
			padding: 5rpx;
			font-size: 30rpx;
			line-height: 1.5;
			resize: none;
			height: auto;
			min-height: 300rpx;
			max-height: 300rpx;
			overflow-y: auto;
		}

		.images {
			margin: 10rpx;
			display: flex;
			flex-wrap: wrap;

			.imagePublic {
				margin: 5px;
				width: 80px;
				height: 80px;
				flex: 0 0 auto;
				border-radius: 5px;
			}
		}

		.publicBar {
			margin: 5rpx;
			display: flex;
			margin-top: auto;

			.resetButton {
				margin: 20rpx;
				font-size: 30rpx;
				width: 150rpx;
				height: 75rpx;
				opacity: 0.75;
				background: #ebe0e2;
				border-radius: 10px;
				color: #020202;
			}

			.resetButtonHover {
				margin: 20rpx;
				font-size: 30rpx;
				width: 150rpx;
				height: 75rpx;
				opacity: 0.75;
				background: #ccc3c4;
				border-radius: 20px;
				color: #020202;
			}

			.submitButton {
				margin: 20rpx;
				font-size: 30rpx;
				width: 150rpx;
				height: 75rpx;
				opacity: 0.75;
				background: #e79fbc;
				border-radius: 20px;
				color: #020202;
			}

			.submitButtonHover {
				margin: 20rpx;
				font-size: 30rpx;
				width: 150rpx;
				height: 75rpx;
				opacity: 0.75;
				background: #d592ad;
				border-radius: 20px;
				color: #020202;
			}
		}
	}
</style>